今天想要來介紹 copy-webpack-plugin 的使用，因為有一種情境是有時我們不需要進入模組化的 bundle， 只需要將某個檔案或某個資料夾裡，整個複製過去，例如 css 資料夾或 images 資料夾，這時就可以透過 copy-webpack-plugin 來達成。

該動手作啦

安裝 copy-webpack-plugin

$ npm install --save-dev copy-webpack-plugin

修改 webpack.config.js

我先在專案資料夾中新增 ./app/assets/static/css/file1.css 以及 ./app/assets/static/css/file2.css 兩個檔案，而目的是將 ./app/assets/static 資料夾中的檔案，都複製到 ./dist/assets/static 資料夾中，修改 webpack.config.js 如下：

…
var CopyWebpackPlugin = require('copy-webpack-plugin');

…

new CopyWebpackPlugin([
  { from: './app/assets/static', to: './assets/static' },
])
…

再執行 webpack 指令，就可以將資料夾整個複製過去了。

不過這要留意一點，這裡複製過去的檔案，是不會進到我在 <19 - Plugins 小幫手 02> 產生 bundle 後的 mapping 檔 - webpack-manifest-plugin 文章中所提到的 manifest.json 檔案。所以請視專案需求來使用，適合用在 bundle 的過程中，僅複製檔案或資料夾時來使用。

明天可能要進入下個階段，思考中。敬請期待。